import Vue from 'Vue'

const app = function () {

    new Vue({
        data: {
            title: '<h3>使用<code>v-html</code>输出原生的html</h3>',
            recieveMessage: '',
        }
    }).$mount('#app-1')

    new Vue({
        computed: {
            isNight() {
                return new Date().getHours() < 4 || new Date().getHours() > 19
            }
        }
    }).$mount('#app-2')

    new Vue({
        el: '#app-3',
        data: {
            loginType: 'username'
        },
        methods: {
            troggle() {
                this.loginType = this.loginType === 'username' ? 'email' : 'username'
            }
        }
    })

    new Vue({
        el: '#app-4',
        data: {
            query: '',
            isSort: false,
            boxOffice: [
                { name: 'Avatar', year: 2009, sells: '27.88', run: true, director: { firstname: 'yannie', lastname: 'cheung', age: '17' } },
                { name: 'Frozen', year: 2013, sells: '12.765', run: false },
                { name: 'Furious 7', year: 2015, sells: '15.15', run: true },
                { name: 'Iron Man 3', year: 2013, sells: '12.154', run: false },
                { name: 'Titanic', year: 1997, sells: '21.868', run: false },
                { name: 'Spectre', year: 2015, sells: '8.722', run: true },
                { name: 'Inception', year: 2010, sells: '8.255', run: false },
                { name: 'Jurassic World', year: 2015, sells: '16.99', run: false }
            ]
        },
        computed: {
            //点击按钮，在原顺序与票房顺序切换
            sortBySells() {
                var newArr = this.boxOffice.concat()
                if (this.isSort) {
                    return newArr.sort((b1, b2) => b1.sells - b2.sells)
                } else {
                    return this.boxOffice
                }
            },
            //2010之前票房大于10亿的电影，调用两个方法
            filterBoxOffice() {
                return this.highSells(this.beforeYear(this.boxOffice))
            },
            //根据输入内容过滤
            queryBo() {
                var vm = this
                var noblank = this.boxOffice.filter(item => Number(vm.query) === item.year)
                return this.query ? noblank : this.boxOffice
            }

        },
        methods: {
            //点击按钮，在原顺序与票房顺序切换
            sort(isSort) {
                var newArr = this.boxOffice.concat()
                return isSort ? newArr.sort((b1, b2) => b1.sells - b2.sells) : this.boxOffice
            },
            beforeYear(list) {
                return list.filter(bo => bo.year <= 2010)
            },
            highSells(list) {
                return list.filter(bo => bo.sells <= 10.0)
            },
            //设置列表项
            modifyItem() {
                //无响应
                // this.boxOffice[0] = { name: 'The Last Jedi', year: 2017, sells: '13.32', director: { firstname: 'yannie', lastname: 'cheung', age: '17' } }
                // this.boxOffice.length = 5

                //无响应的解决方法
                // this.$set 等价于 Vue.set
                Vue.set(this.boxOffice, 0, { name: 'The Last Jedi', year: 2017, sells: '13.32', director: { firstname: 'yannie', lastname: 'cheung', age: '17' } })
                // this.boxOffice.splice(0, 1, { name: 'The Last Jedi', year: 2017, sells: '13.32', director: { firstname: 'yannie', lastname: 'cheung', age: '17' }})
                //修改长度
                this.boxOffice.splice(5)


                //有响应
                // this.boxOffice[1].name = 'somename'
            },
            //添加对象属性
            modifyObject() {
                // 无响应
                // this.boxOffice[0].director.sex = 'male'

                //解决方法
                Vue.set(this.boxOffice[0].director, 'sex', 'male')

                this.boxOffice[0].director = Object.assign({}, this.boxOffice[0].director, {
                    aliasname: 'kanzaki urumi',
                    graduation: 'NUIST'
                })
            }
        }
    })


    new Vue({
        data: {
            boxOffice: [
                { id:1,name: 'Avatar', year: 2009, sells: '27.88', run: true, director: { firstname: 'yannie', lastname: 'cheung', age: '17' } },
                { id:2,name: 'Frozen', year: 2013, sells: '12.765', run: false },
                { id:3,name: 'Furious 7', year: 2015, sells: '15.15', run: true },
                { id:4,name: 'Iron Man 3', year: 2013, sells: '12.154', run: false },
                { id:5,name: 'Titanic', year: 1997, sells: '21.868', run: false },
                { id:6,name: 'Spectre', year: 2015, sells: '8.722', run: true },
                { id:7,name: 'Inception', year: 2010, sells: '8.255', run: false },
                { id:8,name: 'Jurassic World', year: 2015, sells: '16.99', run: false }
            ]
        },
        components: {
            'child': {
                props:['bo'],
                template: '<li>{{bo.id}}、{{bo.name}}</li>'
            }
        }
    }).$mount('#app-5')


}

export { app }